import React, { useState } from 'react'

export default function ComplexHooksState() {
    const [friends, setFriends] = useState(["kobe", "liLei"]);
    const [students, setStudents] = useState([{ id: "01", name: "liLei", age: 18 }, { id: "02", name: "kobe", age: 19 }])
    
    //定义一个年龄增加的函数
    function incrementAgeWithIndex(index){
        const newStudents = [...students];
        newStudents[index].age += 1;
        setStudents(newStudents);
    }
    return (
        <div>
            <h2>好友列表的展示</h2>
            <ul>
                {
                    friends.map((item, index) => {
                        return <li key={item}>{item}</li>
                    })
                }
            </ul>
            {/* 注意：这里数据的改变，是创建一个新的对象去替换旧的对象,不能直接去改变原来的数组 */}
            <button onClick={e => setFriends([...friends, "tom"], "tom")}>增加好友</button>
            <h2>学生列表展示</h2>
            <ul>
                {
                    students.map((item, index) => {
                        return (
                            <li key={item.id}>
                                <span>学生序号：{item.id}  学生姓名：{item.name}  学生年龄：{item.age}</span>
                                <button onClick={e => incrementAgeWithIndex(index)}>age+1</button>
                            </li>

                        )
                    })
                }
            </ul>
        </div>
    )
}
